<template>
        <!-- <legend>自定义指令</legend> -->
        <div class="adiv">
            <div class="zi">开始努力写代码了~</div>
            <input type="text" class="ainput" v-model="content" placeholder="添加要做的事儿">
            <button @click="submit">提交</button>
            <br>
            <div v-for="(item,index) in list" :key="index">
                <input type="checkbox"  @click="handclick(index)" name="" id="" v-model="acheck[index]">
                {{item}}
                <button class="cha" @click="del(index)">x</button>
            </div>
            <div class="total">
                <span>全部</span>{{total}}条事项<span>已完成：{{accomplish}}</span>
                <span>未完成：{{fail}}</span>
            </div>    
        </div>
</template>
<script setup>
import {ref} from "vue"
    let list=ref([])
    let content=ref("")
    let acheck=ref([])
    let total=ref(0)
    let accomplish=ref(0)
    let fail=ref(0)
    function submit(){
        setTimeout(()=>{
            list.value.unshift(content.value)
            total=list.value.length
        }) 
    }
    function del(index){
        setTimeout(()=>{         
                if(acheck.value[index]){
                    accomplish.value--
                    acheck.value[index]=acheck.value[index+1]
                    console.log(index)
                    list.value.splice(index,1) 
                }else{
                    fail.value--
                    list.value.splice(index,1) 
                }
                total=list.value.length
        })   
    }
    function handclick(index){
        setTimeout(()=>{
            // console.log(acheck.value)
            if(acheck.value[index]){
                accomplish.value++
                // console.log(list.value.length)
                fail.value=list.value.length-accomplish.value
            }else{
                accomplish.value--
                fail.value=list.value.length-accomplish.value
            }
        })
    }
</script>
<style>
.total{
    position: absolute;
    bottom: 20px;
    left: 80px;
}
span{
    border: 1px solid rgb(8, 199, 241);
    font-weight: 900;
    color: rgb(51, 49, 49);
}
.cha{
    border: none;
    background-color: transparent;
    font-weight: 900;
    position: absolute;
    right: 50px;
}
.zi{
    padding-top: 50px;
    font-size: 30px;
    font-family: "幼圆";
    text-align: center;
}
.adiv{
    height: 300px;
    width: 400px;
    background-color: pink;
    margin: 200px 500px;
    position: relative;
}
.ainput{
    border: none;
    border-bottom: 2px dashed hotpink;
    width: 300px;
    height: 40px;
    margin-left: 20px;
    margin-top: 50px;
    background-color: pink;
    outline: 0;
}
</style>